<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>Home - My Admin Template</title>

	<!-- Main Styles -->
	<link rel="stylesheet" th:href="@{/assets/styles/style-horizontal.min.css}">

	<!-- Material Design Icon -->
	<link rel="stylesheet" th:href="@{/assets/fonts/material-design/css/materialdesignicons.css}">

	<!-- mCustomScrollbar -->
	<link rel="stylesheet" th:href="@{/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css}">

	<!-- Waves Effect -->
	<link rel="stylesheet" th:href="@{/assets/plugin/waves/waves.min.css}">

	<!-- Sweet Alert -->
	<link rel="stylesheet" th:href="@{/assets/plugin/sweet-alert/sweetalert.css}">

	<!-- Morris Chart -->
	<link rel="stylesheet" th:href="@{/assets/plugin/chart/morris/morris.css}">

	<!-- FullCalendar -->
	<link rel="stylesheet" th:href="@{/assets/plugin/fullcalendar/fullcalendar.min.css}">
	<link rel="stylesheet" th:href="@{/assets/plugin/fullcalendar/fullcalendar.print.css}" media='print'>
	<style>
		.app::-webkit-scrollbar {
			width: 8px; /*  设置纵轴（y轴）轴滚动条 */
			height: 8px; /*  设置横轴（x轴）轴滚动条 */
		}
		/* 滚动条滑块（里面小方块） */
		.app::-webkit-scrollbar-thumb {
			border-radius: 10px;
			box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
			background: rgba(219, 219, 219, 0.9);
		}
	</style>
</head>

<body class="app" style="overflow-x:hidden ; ">

<div class="main-content " style="margin: 10px 5px 10px 5px;">
	<div class="row small-spacing">
		<div class="col-xs-12">
			<div class="box-content">
				<h4 class="box-title">Activity</h4>
				<!-- /.box-title -->
				<div class="dropdown js__drop_down">
					<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
					<ul class="sub-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else there</a></li>
						<li class="split"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
					<!-- /.sub-menu -->
				</div>
				<!-- /.dropdown js__dropdown -->
				<div id="real-time-flot-chart" class="flot-chart" style="height: 320px"></div>
				<!-- /#flot-chart-1.flot-chart -->
			</div>
			<!-- /.box-content -->
		</div>
		<!-- /.col-xs-12 -->

		<div class="col-lg-4 col-xs-12">
			<div class="box-content">
				<h4 class="box-title text-info">Total Visitors</h4>
				<!-- /.box-title -->
				<div class="dropdown js__drop_down">
					<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
					<ul class="sub-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else there</a></li>
						<li class="split"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
					<!-- /.sub-menu -->
				</div>
				<!-- /.dropdown js__dropdown -->
				<div class="content widget-stat">
					<div id="traffic-sparkline-chart-1" class="left-content margin-top-15"></div>
					<!-- /#traffic-sparkline-chart-1 -->
					<div class="right-content">
						<h2 class="counter text-info">278</h2>
						<!-- /.counter -->
						<p class="text text-info">Some text here</p>
						<!-- /.text -->
					</div>
					<!-- .right-content -->
				</div>
				<!-- /.content widget-stat -->
			</div>
			<!-- /.box-content -->
		</div>
		<!-- /.col-lg-4 col-xs-12 -->

		<div class="col-lg-4 col-xs-12">
			<div class="box-content">
				<h4 class="box-title text-success">Projects Done</h4>
				<!-- /.box-title -->
				<div class="dropdown js__drop_down">
					<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
					<ul class="sub-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else there</a></li>
						<li class="split"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
					<!-- /.sub-menu -->
				</div>
				<!-- /.dropdown js__dropdown -->
				<div class="content widget-stat">
					<div id="traffic-sparkline-chart-2" class="left-content margin-top-10"></div>
					<!-- /#traffic-sparkline-chart-2 -->
					<div class="right-content">
						<h2 class="counter text-success">36%</h2>
						<!-- /.counter -->
						<p class="text text-success">Some text here</p>
						<!-- /.text -->
					</div>
					<!-- .right-content -->
				</div>
				<!-- /.content widget-stat -->
			</div>
			<!-- /.box-content -->
		</div>
		<!-- /.col-lg-4 col-xs-12 -->

		<div class="col-lg-4 col-xs-12">
			<div class="box-content">
				<h4 class="box-title text-success">Salary Traffic</h4>
				<!-- /.box-title -->
				<div class="dropdown js__drop_down">
					<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
					<ul class="sub-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else there</a></li>
						<li class="split"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
					<!-- /.sub-menu -->
				</div>
				<!-- /.dropdown js__dropdown -->
				<div class="content widget-stat">
					<div id="traffic-sparkline-chart-3" class="left-content"></div>
					<!-- /#traffic-sparkline-chart-3 -->
					<div class="right-content">
						<h2 class="counter text-danger">849 <i class="fa fa-angle-double-up"></i></h2>
						<!-- /.counter -->
						<p class="text text-danger">Some text here</p>
						<!-- /.text -->
					</div>
					<!-- .right-content -->
				</div>
				<!-- /.content widget-stat -->
			</div>
			<!-- /.box-content -->
		</div>
		<!-- /.col-lg-4 col-xs-12 -->

		<div class="col-lg-6 col-xs-12">
			<div class="box-content">
				<h4 class="box-title">Visitor Analytics</h4>
				<!-- /.box-title -->
				<div class="dropdown js__drop_down">
					<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
					<ul class="sub-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else there</a></li>
						<li class="split"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
					<!-- /.sub-menu -->
				</div>
				<!-- /.dropdown js__dropdown -->
				<div id="bar-morris-chart" class="morris-chart" style="height: 240px"></div>
				<div class="text-center">
					<ul class="list-inline morris-chart-detail-list">
						<li><i class="fa fa-circle"></i>Series A</li>
						<li><i class="fa fa-circle"></i>Series B</li>
						<li><i class="fa fa-circle"></i>Series C</li>
					</ul>
				</div>
				<!-- /#bar-morris-chart.morris-chart -->
			</div>
			<!-- /.box-content -->
		</div>
		<!-- /.col-lg-6 col-xs-12 -->

		<div class="col-lg-6 col-xs-12">
			<div class="box-content">
				<h4 class="box-title">Memory usage</h4>
				<!-- /.box-title -->
				<div class="dropdown js__drop_down">
					<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
					<ul class="sub-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else there</a></li>
						<li class="split"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
					<!-- /.sub-menu -->
				</div>
				<!-- /.dropdown js__dropdown -->
				<div id="donut-morris-chart" class="morris-chart" style="height: 240px"></div>
				<div class="text-center">
					<ul class="list-inline morris-chart-detail-list">
						<li><i class="fa fa-circle"></i>Series A</li>
						<li><i class="fa fa-circle"></i>Series B</li>
						<li><i class="fa fa-circle"></i>Series C</li>
					</ul>
				</div>
				<!-- /#donut-morris-chart.morris-chart -->
			</div>
			<!-- /.box-content -->
		</div>
		<!-- /.col-lg-6 col-xs-12 -->
	</div>
	<!-- /.row -->

	<div class="row small-spacing">
		<div class="col-lg-3 col-md-6 col-xs-12">
			<div class="box-content bg-success text-white">
				<div class="statistics-box with-icon">
					<i class="ico small fa fa-diamond"></i>
					<p class="text text-white">SUCCESS</p>
					<h2 class="counter">72943</h2>
				</div>
			</div>
			<!-- /.box-content -->
		</div>
		<!-- /.col-lg-3 col-md-6 col-xs-12 -->
		<div class="col-lg-3 col-md-6 col-xs-12">
			<div class="box-content bg-info text-white">
				<div class="statistics-box with-icon">
					<i class="ico small fa fa-download"></i>
					<p class="text text-white">DOWNLOAD</p>
					<h2 class="counter">6382</h2>
				</div>
			</div>
			<!-- /.box-content -->
		</div>
		<!-- /.col-lg-3 col-md-6 col-xs-12 -->
		<div class="col-lg-3 col-md-6 col-xs-12">
			<div class="box-content bg-danger text-white">
				<div class="statistics-box with-icon">
					<i class="ico small fa fa-bug"></i>
					<p class="text text-white">FIXED BUG</p>
					<h2 class="counter">12564</h2>
				</div>
			</div>
			<!-- /.box-content -->
		</div>
		<!-- /.col-lg-3 col-md-6 col-xs-12 -->
		<div class="col-lg-3 col-md-6 col-xs-12">
			<div class="box-content bg-warning text-white">
				<div class="statistics-box with-icon">
					<i class="ico small fa fa-usd"></i>
					<p class="text text-white">SALES</p>
					<h2 class="counter">2,637</h2>
				</div>
			</div>
			<!-- /.box-content -->
		</div>
		<!-- /.col-lg-3 col-md-6 col-xs-12 -->
	</div>
	<!-- .row -->

	<div class="row small-spacing">
		<div class="col-lg-6 col-xs-12">
			<div class="box-content">
				<div id="calendar-widget"></div>
			</div>
			<!-- /.box-content -->
		</div>
		<!-- /.col-lg-6 col-xs-12 -->
		<div class="col-lg-6 col-xs-12">
			<div class="box-content">
				<h4 class="box-title">Purchases</h4>
				<!-- /.box-title -->
				<div class="dropdown js__drop_down">
					<a href="#" class="dropdown-icon glyphicon glyphicon-option-vertical js__drop_down_button"></a>
					<ul class="sub-menu">
						<li><a href="#">Product</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else there</a></li>
						<li class="split"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
					<!-- /.sub-menu -->
				</div>
				<!-- /.dropdown js__dropdown -->
				<div class="table-responsive table-purchases">
					<table class="table table-striped margin-bottom-10">
						<thead>
						<tr>
							<th style="width:40%;">Product</th>
							<th>Price</th>
							<th>Date</th>
							<th>State</th>
							<th style="width:5%;"></th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>Amaza Themes</td>
							<td>$71</td>
							<td>Nov 12,2023</td>
							<td class="text-success">Completed</td>
							<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
						</tr>
						<tr>
							<td>Macbook</td>
							<td>$142</td>
							<td>Nov 10,2023</td>
							<td class="text-danger">Cancelled</td>
							<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
						</tr>
						<tr>
							<td>Samsung TV</td>
							<td>$200</td>
							<td>Nov 01,2023</td>
							<td class="text-warning">Pending</td>
							<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
						</tr>
						<tr>
							<td>Ninja Admin</td>
							<td>$200</td>
							<td>Oct 28,2023</td>
							<td class="text-warning">Pending</td>
							<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
						</tr>
						<tr>
							<td>Galaxy Note 5</td>
							<td>$200</td>
							<td>Oct 28,2023</td>
							<td class="text-success">Completed</td>
							<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
						</tr>
						<tr>
							<td>CleanUp Themes</td>
							<td>$71</td>
							<td>Oct 22,2023</td>
							<td class="text-success">Completed</td>
							<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
						</tr>
						<tr>
							<td>Facebook WP Plugin</td>
							<td>$10</td>
							<td>Oct 15,2023</td>
							<td class="text-success">Completed</td>
							<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
						</tr>
						<tr>
							<td>Iphone 7</td>
							<td>$100</td>
							<td>Oct 12,2023</td>
							<td class="text-warning">Pending</td>
							<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
						</tr>
						<tr>
							<td>Nova House</td>
							<td>$100</td>
							<td>Oct 12,2023</td>
							<td class="text-warning">Pending</td>
							<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
						</tr>
						<tr>
							<td>Repair Cars</td>
							<td>$35</td>
							<td>Oct 12,2023</td>
							<td class="text-warning">Pending</td>
							<td><a href="#"><i class="fa fa-plus-circle"></i></a></td>
						</tr>
						</tbody>
					</table>
					<!-- /.table -->
				</div>
				<!-- /.table-responsive -->
			</div>
			<!-- /.box-content -->
		</div>
		<!-- /.col-lg-6 col-xs-12 -->
	</div>
	<!-- /.row -->

</div>
<!-- /.main-content -->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script th:src="@{/assets/script/html5shiv.min.js}"></script>
<script th:src="@{/assets/script/respond.min.js}"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script th:src="@{/assets/scripts/jquery.min.js}"></script>
<script th:src="@{/assets/scripts/modernizr.min.js}"></script>
<script th:src="@{/assets/plugin/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{/assets/plugin/nprogress/nprogress.js}"></script>
<script th:src="@{/assets/plugin/sweet-alert/sweetalert.min.js}"></script>
<script th:src="@{/assets/plugin/waves/waves.min.js}"></script>

<!-- Morris Chart -->
<script th:src="@{/assets/plugin/chart/morris/morris.min.js}"></script>
<script th:src="@{/assets/plugin/chart/morris/raphael-min.js}"></script>
<script th:src="@{/assets/scripts/chart.morris.init.min.js}"></script>

<!-- Flot Chart -->
<script th:src="@{/assets/plugin/chart/plot/jquery.flot.min.js}"></script>
<script th:src="@{/assets/plugin/chart/plot/jquery.flot.tooltip.min.js}"></script>
<script th:src="@{/assets/plugin/chart/plot/jquery.flot.categories.min.js}"></script>
<script th:src="@{/assets/plugin/chart/plot/jquery.flot.pie.min.js}"></script>
<script th:src="@{/assets/plugin/chart/plot/jquery.flot.stack.min.js}"></script>
<script th:src="@{/assets/scripts/chart.flot.init.min.js}"></script>

<!-- Sparkline Chart -->
<script th:src="@{/assets/plugin/chart/sparkline/jquery.sparkline.min.js}"></script>
<script th:src="@{/assets/scripts/chart.sparkline.init.min.js}"></script>

<!-- FullCalendar -->
<script th:src="@{/assets/plugin/moment/moment.js}"></script>
<script th:src="@{/assets/plugin/fullcalendar/fullcalendar.min.js}"></script>
<script th:src="@{/assets/scripts/fullcalendar.init.js}"></script>

<script th:src="@{/assets/scripts/main.min.js}"></script>
<script th:src="@{/assets/scripts/horizontal-menu.min.js}"></script>
</body>
</html>